<!doctype html>
<html xmlns:th="www.thymeleaf.org">
<meta charset="utf-8">
<head th:replace="index::head"></HEAD>
<style>
form img {
	max-width: 100%
}
form img:hover {
	border: 1px solid green;
}
.layui-input-block{
	font-size: 14px;
	line-height: 39px
}
</style>
<BODY>
	<header th:replace="index::#ph"></header>
	<main>
		<div style="padding: 3px 8px">
			<span class="layui-breadcrumb">
				<a href="/">作业论坛首页</a>
				<a :href="'to_list?'+nvl(tasklog.task,'course.id')">{{nvl(tasklog.task,'course.name')}}</a>
				<a :href="'to_detail?id='+tasklog.task.id">{{tasklog.task.name}}</a>
				<a>
					<cite>提交作业</cite>
				</a>
			</span>
		</div>
		<form class="layui-form layui-main" style="width: 800px">
			<div class="layui-form-item">
				<label class="layui-form-label">作业题目：</label>
				<div class="layui-form-mid" v-text="tasklog.task.name"></div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">作业内容：</label>
				<div class="layui-input-block content" id="idiv" v-html="tasklog.task.intro" style="padding:5px;max-height: 300px;overflow:auto;border: 1px solid #ddd;border-radius: 3px"></div>
				<div class="layui-input-block " style="text-align: center">
					<a href="javascript:;" onclick="lookall('#idiv')">显示全部</a>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">提交人：</label>
				<div class="layui-input-block">
				{{tasklog.inUser?tasklog.inUser.name:unm}}
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">完成进度：</label>
				<div class="layui-input-block">
					<layrdo data="未完成：0，完成中：50，已完成：100" model="tasklog.progress"></layrdo>
				</div>
			</div>
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">截图描述：</label>
				<div class="layui-input-block">
				    <script id="editor" type="text/plain" style="width:100%;height: 100px"></script>
					<div style="text-align: center;margin-top: 7px">
					</div>
					<textarea id="saytext" style="display: none;"></textarea>
				</div>
			</div>
			<div style="text-align: center;">
				<span id="emotion" style="cursor: pointer; margin-right: 10px"><img src="image/face/baiyan.gif" width="20" height="20" alt="" /> 表情</span>
				<button v-if="uid==nvl(tasklog,'inUser.id') || tasklog.id == undefined " @click="save" type="button" class="layui-btn">提交</button>
				<button onclick="window.history.back();" type="button" class="layui-btn">返回</button>
			</div>
		</form>
		<load v-if="param('id')" :url="'hwctask/taskLog/get?id='+param('id')" data="tasklog" @load="syncLog"></load>
		<load v-if="param('task.id')" :url="'hwctask/task/get?id='+param('task.id')" data="tasklog.task"></load>
	</main>
	<script>
		var v = new Vue({
			el : "main",
			data : {
				uid : '[[${session?.loginedUser?.id}]]',
				unm : '[[${session?.loginedUser?.name}]]',
				tasklog:{
					task:{name:""}, // 必须至少给一个空属性, 不然load失败.....   :(
					progress:50,
					files:[],
					log:""
				}
			},
			methods : {
				syncLog(){
					try{
						ue.setContent(this.tasklog.log);
					}catch(e){
						// 继续
					}
				},
				save(){
					let tl = {};
					if(this.tasklog.id){
						tl["id"] = this.tasklog.id;	
					}
					tl["task.id"] = this.tasklog.task.id;
					tl.progress = this.tasklog.progress;
					tl.log = ue.val();
					for(let i=0 ; i < this.tasklog.files.length ; i++){
						tl['files['+i+'].webPath'] = this.tasklog.files[i].webPath;
						tl['files['+i+'].oldName'] = this.tasklog.files[i].oldName;
						tl['files['+i+'].newName'] = this.tasklog.files[i].newName;
						tl['files['+i+'].relaTable'] = this.tasklog.files[i].relaTable;
					}
					post("commit",usp(tl),
						res=>{ location.href="to_detail?id=" + this.tasklog.task.id; }
					);
				}
			}
		});
		layui.element.render();
	</script>
	<!-- 导入页脚 -->
	<footer th:replace="index::footer"></footer>
	<div th:fragment="ue(content)">
		<!-- Editor.defaultoptions.js 17行 屏蔽了  zIndex: 999, -->
		<script type="text/javascript" charset="utf-8" src="js/ueditor-1.4.3.3/ueditor.config.js"></script>
	    <script type="text/javascript" charset="utf-8" src="js/ueditor-1.4.3.3/editor_api.js"> </script>
	    <script type="text/javascript" charset="utf-8" src="js/ueditor-1.4.3.3/lang/zh-cn/zh-cn.js"></script>
	    <script type="text/javascript">
		    var ue = UE.getEditor('editor');
		    ue.placeholder("可以直接使用 Ctrl + V 粘贴截图……");
	    	var exp = '[[${content}]]';
	    	if(exp == ''){
	    		exp = 'v.tasklog.log';	
	    	} else if(exp == '空' || exp == 'null'){
	    		exp = false;	
	    	}
		    if(exp){
			    ue.ready(()=>{
			    	ue.setContent(eval(exp));
			    });
		    }
		</script>
	    <script type="text/javascript">var jQuery = $ = layui.$;</script>
	    <script type="text/javascript" src="js/jquery.qqface.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$.qqface({
			        before : function(textarea, code){
			        	var html = "<img src='image/face/?.gif'>";
			        	code = code.replace(/\[:(.+)\]/,"$1");
			        	html = html.replace(/\?/,code)
			        	ue.execCommand('inserthtml', html);
			        }, //要在插入之前执行
			        imgPath : 'image/face/',
			        textarea : $('#saytext'),
			        handle : $('#emotion')
			    });
				$(".jquery-qqface").css("z-index","9999");
			})
		</script>
	</div>
</BODY>
</HTML>